》Tween
昨天我們提到的 hover 效果，在 Phaser 上，要怎麼做出 css hover 改變狀態的動畫呢，今天我們就來試試看吧！

》Javascript 內容
使用 pointerover 與 pointerout 來對 alpha 動畫做控制

scene.create = function() {
    .....
    // 設為可互動
    this.man = this.add.sprite(50, 255, 'man', 0).setInteractive()

    // 對於 man 增加 tweens 動畫
    this.man.alphaTween = this.tweens.add({
        targets: this.man,
        alpha: 0.8,
        duration: 200,
        paused: true
    })

    this.man.on('pointerover', () => {
        this.man.alphaTween.restart()
    })

    this.man.on('pointerout', () => {
        this.man.alpha = 1
    })
}

現在有個存在的問題，當滑鼠快速滑進滑出，因為 alphaTween 還沒有執行結束，所以 alpha 還在執行動畫，但 pointerout 老早已經 alpha = 1，這時就會有半透明的問題產生。

this.man.on('pointerout', () => {
    this.man.alphaTween.stop()			// 這時要先把動畫停掉
    this.man.alpha = 1
})

》結論
今天我們學到如何使用 pointerover 與 pointerout，以及動畫結束時，應該先把動畫停掉，再處理後續的事情。

今天就先到這裡，我們明天見。